import * as React from 'react';
import {StyleSheet, TouchableOpacity} from 'react-native';
import {WebView} from 'react-native-webview';

import EditScreenInfo from '../components/EditScreenInfo';
import {Text, View} from '../components/Themed';
import {useNavigation} from "@react-navigation/native";
import {Ionicons} from "@expo/vector-icons";

let webView: any;
export default function TabOneScreen() {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      {/*<Text style={styles.title}>Tab One</Text>*/}
      {/*<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />*/}


      {/*<EditScreenInfo path="/screens/TabOneScreen.tsx" />*/}
      <WebView
        ref={ref => webView = ref}
        source={{uri: 'https://prewww.kaikeba.com'}}
        style={{flex: 1, marginTop: 20}}/>
      <View style={{backgroundColor: 'transparent',
        left:50,
        height: 50, marginTop: 20, position: "absolute"}}>
        <TouchableOpacity
          style={{width: 50}}
          onPress={() => webView.goBack()}>
          <Ionicons name={'ios-arrow-back'}
                    style={{paddingLeft: 15, paddingRight: 10, paddingTop: 10, paddingBottom: 10}}
                    size={26}
                    color="#000"/>
        </TouchableOpacity>
      </View>
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: "relative"
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: '80%',
  },
});
